<template>
  <div class="edit-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="550px"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
        <el-form-item label="订单号" prop="order_no">
          <el-input v-model="formData.order_no" clearable placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="订单金额" prop="order_price">
          <el-input v-model="formData.order_price" clearable placeholder="请输入订单金额" />
        </el-form-item>
        <el-form-item label="订单总金额" prop="total_price">
          <el-input v-model="formData.total_price" clearable placeholder="请输入订单总金额" />
        </el-form-item>
        <el-form-item label="优惠券ID" prop="coupon_id">
          <el-input v-model="formData.coupon_id" clearable placeholder="请输入优惠券ID" />
        </el-form-item>
        <el-form-item label="优惠券抵扣金额" prop="coupon_money">
          <el-input v-model="formData.coupon_money" clearable placeholder="请输入优惠券抵扣金额" />
        </el-form-item>
        <el-form-item label="20微信支付" prop="pay_type">
          <el-input v-model="formData.pay_type" clearable placeholder="请输入20微信支付" />
        </el-form-item>
        <el-form-item label="付款时间" prop="pay_time">
          <el-input v-model="formData.pay_time" clearable placeholder="请输入付款时间" />
        </el-form-item>
        <el-form-item label="订单状态1代付款2待出行3待评论4退款成功5订单取消6已完成7退款中" prop="status">
          <el-input v-model="formData.status" clearable placeholder="请输入订单状态1代付款2待出行3待评论4退款成功5订单取消6已完成7退款中" />
        </el-form-item>
        <el-form-item label="出行时间" prop="start_time">
          <el-input v-model="formData.start_time" clearable placeholder="请输入出行时间" />
        </el-form-item>
        <el-form-item label="订单是否结算0未结算1结算" prop="is_settled">
          <el-input v-model="formData.is_settled" clearable placeholder="请输入订单是否结算0未结算1结算" />
        </el-form-item>
        <el-form-item label="订单是否评价0否1是" prop="is_comment">
          <el-input v-model="formData.is_comment" clearable placeholder="请输入订单是否评价0否1是" />
        </el-form-item>
        <el-form-item label="用户ID" prop="user_id">
          <el-input v-model="formData.user_id" clearable placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="取消订单备注" prop="cancel_remake">
          <el-input v-model="formData.cancel_remake" clearable placeholder="请输入取消订单备注" />
        </el-form-item>
        <el-form-item label="退款金额" prop="refund_money">
          <el-input v-model="formData.refund_money" clearable placeholder="请输入退款金额" />
        </el-form-item>
        <el-form-item label="0删除1显示" prop="is_delete">
          <el-input v-model="formData.is_delete" clearable placeholder="请输入0删除1显示" />
        </el-form-item>
        <el-form-item label="成年人数" prop="adult_num">
          <el-input v-model="formData.adult_num" clearable placeholder="请输入成年人数" />
        </el-form-item>
        <el-form-item label="儿童人数" prop="child_num">
          <el-input v-model="formData.child_num" clearable placeholder="请输入儿童人数" />
        </el-form-item>
        <el-form-item label="老人人数" prop="old_num">
          <el-input v-model="formData.old_num" clearable placeholder="请输入老人人数" />
        </el-form-item>
        <el-form-item label="房间数" prop="room_num">
          <el-input v-model="formData.room_num" clearable placeholder="请输入房间数" />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="linkman_name">
          <el-input v-model="formData.linkman_name" clearable placeholder="请输入联系人姓名" />
        </el-form-item>
        <el-form-item label="联系人手机号" prop="linkman_tel">
          <el-input v-model="formData.linkman_tel" clearable placeholder="请输入联系人手机号" />
        </el-form-item>
        <el-form-item label="联系人留言" prop="linkman_remake">
          <el-input v-model="formData.linkman_remake" clearable placeholder="请输入联系人留言" />
        </el-form-item>
        <el-form-item label="线路ID" prop="line_id">
          <el-input v-model="formData.line_id" clearable placeholder="请输入线路ID" />
        </el-form-item>
        <el-form-item label="第三方平台流水号" prop="transaction_id">
          <el-input v-model="formData.transaction_id" clearable placeholder="请输入第三方平台流水号" />
        </el-form-item>
        <el-form-item label="退款备注" prop="refund_remake">
          <el-input v-model="formData.refund_remake" clearable placeholder="请输入退款备注" />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="orderEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiOrderAdd, apiOrderEdit, apiOrderDetail } from '@/api/order'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑订单管理' : '新增订单管理'
})

// 表单数据
const formData = reactive({
  id: '',
  order_no: '',
  order_price: '',
  total_price: '',
  coupon_id: '',
  coupon_money: '',
  pay_type: '',
  pay_time: '',
  status: '',
  start_time: '',
  is_settled: '',
  is_comment: '',
  user_id: '',
  cancel_remake: '',
  refund_money: '',
  is_delete: '',
  adult_num: '',
  child_num: '',
  old_num: '',
  room_num: '',
  linkman_name: '',
  linkman_tel: '',
  linkman_remake: '',
  line_id: '',
  transaction_id: '',
  refund_remake: '',
})


// 表单验证
const formRules = reactive<any>({

})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }


}

const getDetail = async (row: Record<string, any>) => {
  const data = await apiOrderDetail({
    id: row.id
  })
  setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate()
  const data = { ...formData,  }
  mode.value == 'edit'
      ? await apiOrderEdit(data)
      : await apiOrderAdd(data)
  popupRef.value?.close()
  emit('success')
}

//打开弹窗
const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
  emit('close')
}



defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
